<template>
    <div class="qilin-QilinTable">
        <el-table 
            :data="ownTableConfig.tableData"
            :border="ownTableConfig.elTableConfig.border || true "
            :size="ownTableConfig.elTableConfig.size || 'small' "
        >
            <template v-for="item in ownTableConfig.headerConfig">
                <el-table-column 
                    v-if="item.type == 'sortIndex' "
                    :key="item.label" 
                    :label="item.label" 
                    :align="item.align || 'center' "
                    :width="item.width ? item.width : '' "
                >
                    <template v-slot:default="scope">
                        <span>
                            {{(ownTableConfig.paginationsObj.currentPage-1)*ownTableConfig.paginationsObj.pageSize+scope.$index+1}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column 
                    v-if="!item.type || item.type == 'text' "
                    :key="item.label" 
                    :label="item.label" 
                    :prop="item.prop" 
                    :align="item.align || 'center'" 
                    :width="item.width ? item.width : '' "
                    :show-overflow-tooltip="item.ellipsis || false "
                >
                </el-table-column>
                <el-table-column 
                    v-if="item.type == 'slot' "
                    :key="item.label" 
                    :label="item.label" 
                    :prop="item.prop" 
                    :align="item.align || 'center'" 
                    :width="item.width ? item.width : '' "
                    :show-overflow-tooltip="item.ellipsis || false "
                >
                    <template v-slot:default="scope">
                        <div class="slot-box">
                            <slot :name="item.slotName" :data="{scope,item}"></slot>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="item.type == 'operate' "
                    :key="item.label" 
                    :label="item.label"
                    :align="item.align || 'center'" 
                    :width="item.width ? item.width : '' "
                    :fixed="item.fixed || 'right' "
                >
                    <template v-slot:default="scope">
                        <div class="operate-box">
                            <el-button 
                                v-for="operateItem in item.operateOptions" 
                                :key="operateItem.buttonName"
                                :type="operateItem.buttonType || 'default' "
                                :size="operateItem.buttonSize || 'small' "
                                @click="operateItem.buttonEvent && operateItem.buttonEvent(scope.row,item)"
                            >
                                {{operateItem.buttonName || "按钮"}}
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination 
            :current-page="ownTableConfig.paginationsObj.currentPage" 
            :page-sizes="ownTableConfig.paginationsObj.pageSizes"
            :page-size="ownTableConfig.paginationsObj.pageSize" 
            :total="ownTableConfig.paginationsObj.total" 
            :layout="ownTableConfig.paginationsObj.layout"
            @current-change="handleCurrentPage" 
            @size-change="handleSizeChange" 
            background
        ></el-pagination>
    </div>
</template>
<script>
/**
 * 相关配置项例子请移步
 *      /views/fund/fundList.vue
 */
export default {
    name:"QilinTable",
    props:{
        tableConfig:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    data(){
        return {
            // 组件自身的默认配置
            ownTableConfig:{
                // el-table标签上的配置项
                elTableConfig:{
                    border:true
                },
                // 表头相关配置项
                headerConfig:[],
                // 真实数据
                tableData:[],
                // 插槽名容器
                slotData:{},
                // 表格分页配置项
                paginationsObj:{
                    currentPage:1, //当前页
                    pageSize:5, //当前每页数量
                    pageSizes:[5,10,15], //每页显示多少条选项集
                    total:0, //表格总数量
                    layout:"total,sizes,prev,pager,next,jumper"
                }
            }
        }
    },
    watch:{
        tableConfig:{
            handler(newValue,oldValue){
                // console.log(newValue);
                this.initOwnTableConfig(newValue);
            },
            immediate:true,
            deep:true
        }
    },
    methods:{
        // 将传入进来的表格配置项赋值给组件自身
        initOwnTableConfig(target){
            for(let key in target){
                if(Object.keys(this.ownTableConfig).includes(key)){
                    this.ownTableConfig[key]=target[key];
                };
            };
            // console.log(this.ownTableConfig);
        },
        // 监听切换页码事件
        handleCurrentPage(page){
            // console.log(page);
            this.$emit("changeCurrentPage",page);
        },
        // 监听切换每页数量事件
        handleSizeChange(size){
            // console.log(size);
            this.$emit("changeCurrentSize",size);
        }
    }
}
</script>
<style lang="less" scoped>
.qilin-QilinTable{
    width:100%;
    >.el-pagination{
        text-align:right;
        padding:20px;
    }
}
</style>